<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'同步句子-句子听选'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="0"> </RouterTabs>
        <view class="content">
          <Book
            ref="book"
            :key="componentKey"
            :book="book"
            :chapterList="chapterList"
            :module="module"
            @change="handleChangeBook"
            @select="handleSelectBook"
          ></Book>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { findListeningChapterList } from "@/api/hearing";
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "句子听选",
          url: "pages/sentence/sentenceChoice",
        },
        {
          name: "句子拼写",
          url: "pages/sentence/sentenceTranslation",
        },
        {
          name: "句子跟读",
          url: "pages/sentence/sentenceRead",
        },
      ],
      type: 1,
      bookId: undefined,
      book: null,
      chapterList: [],
      module: "2",
      componentKey: 0,
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      this.getChapterList();
    },
    handleSelectBook(id) {
      uni.navigateTo({
        url: `/pages/sentence/sentenceChoiceListen?chapterId=${id}`,
      });
    },
    handleChangeBook(id) {
      this.getChapterList(id).then(() => {
        this.componentKey += 1;
      });
    },
    async getChapterList(id) {
      if (id) this.bookId = id;
      let params = {
        bookId: this.bookId,
      };
      await findListeningChapterList(
        Object.assign(params, { type: this.type })
      ).then((res) => {
        if (res.data.book) {
          this.book = res.data.book;
          this.chapterList = res.data.chapterList;
          this.componentKey += 1;
        } else {
          this.$refs.book.handleShowLesson();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./sentenceChoice";
</style>
